<!--头部统计  -->
<template>
	<div class="table flex flex-pack-justify">
		<div class="fBox" :class="['fBox' + (index + 1)]" v-for="(item, index) in list" :key="index">
			<div class="fBox-top">{{ item.name }}</div>
			<div class="fBox-bottom flex flex-align-end">
				<div class="num">
					<ScrollNumber
						:itemStyle="{
							fontSize: '28px'
						}"
						class="scrollNumber"
						:value="item.val || 0"
					></ScrollNumber>
				</div>
				<!-- <div class="van">{{ item.van }}</div> -->
			</div>
		</div>
	</div>
</template>

<script>
import border from '../border.vue';
import StatisticsMixins from '../../StatisticsMixins';
import ScrollNumber from '@/components/vue-scroll-number/src/scroll-number';
import { bigScreenApi } from '@/api/index';

let color = ['#2467ED', '#16E4CF', '#EBA62C'];
export default {
	components: { border },
	mixins: [StatisticsMixins],
	components: { ScrollNumber },
	data() {
		return {
			list: [
				{
					name: '存栏量',
					val: 0
				},
				{
					name: '棚舍数量',
					val: 0
				},
				{
					name: '今年出栏量',
					val: 0
				},
				{
					name: '抵押牛总数',
					val: 0
				}
			]
		};
	},
	props: {
		deptId: {
			type: [String, Number],
			default: 0,
			option_column: {}
		}
	},
	watch: {
		deptId: {
			handler(newV, oldV) {
				this.getInfo();
			},
			immediate: true
		}
	},

	methods: {
		getInfo() {
			this.$postAction(bigScreenApi.farmInfoCount + '?deptId=' + this.deptId).then(res => {
				if (res && res.code == 1) {
					let cowData = res.data;
					console.log(cowData);
					this.list = [
						{
							name: '存栏量',
							val: cowData.inColumnCount || 0
						},
						{
							name: '棚舍数量',
							val: cowData.succahCount || 0
						},
						{
							name: '今年出栏量',
							val: cowData.publishCount || 0
						},
						{
							name: '抵押牛总数',
							val: cowData.pledgeCount || 0
						}
					];
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.table {
	height: 1.2rem;
	margin-top: 0.2rem;
	.fBox {
		width: 25%;
		background: no-repeat;
		background-size: auto 100%;
		padding-left: 0.63rem;
		&1 {
			background-image: url(/img/dashboard/ring1.png);
			color: #fff6ec;
		}
		&2 {
			background-image: url(/img/dashboard/ring2.png);
			color: #c3dbfa;
		}
		&3 {
			background-image: url(/img/dashboard/ring3.png);
			color: #cdfffd;
		}
		&4 {
			background-image: url(/img/dashboard/ring4.png);
			color: #cdf0ff;
		}
		&-top {
			font-size: 0.18rem;
			padding-top: 0.15rem;
		}
		&-bottom {
			width: 100%;
			.num {
				font-size: 0.36rem;
				font-weight: 600;
				color: #ffffff;
				display: flex;
			}
			.van {
				font-size: 0.12rem;
				// font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #eeeeee;
				margin: 0 0 0.2em 0;
			}
		}
	}
}
</style>
